<template>
  <div class="financial-dashboard">
    <!-- 顶部统计数据栏 -->
    <div class="stats-header">
      <div v-for="(stat, index) in stats" :key="index" class="stat-item">
        <div class="stat-label">{{ stat.label }}</div>
        <div class="stat-value">{{ stat.value }}</div>
      </div>
    </div>

    <!-- 资金流向行业展示 -->
    <div class="sectors-container">
      <div class="sector-section inflow">
        <h3 class="section-title">
          <i class="el-icon-top-right" /> 今日资金流入行业
        </h3>
        <div class="sectors-grid">
          <div v-for="(sector, index) in inflowSectors" :key="index" class="sector-tag">
            {{ sector }}
          </div>
        </div>
      </div>

      <div class="sector-section outflow">
        <h3 class="section-title">
          <i class="el-icon-bottom-left" /> 今日资金流出行业
        </h3>
        <div class="sectors-grid">
          <div v-for="(sector, index) in outflowSectors" :key="index" class="sector-tag">
            {{ sector }}
          </div>
        </div>
      </div>
    </div>

    <!-- ETF交易表格 -->
    <div class="etf-container">
      <table class="etf-table">
        <thead>
          <tr>
            <th>代码</th>
            <th>名称</th>
            <th>收盘价</th>
            <th>MA20</th>
            <th>波动率</th>
            <th>总回报率</th>
            <th>今日操作</th>
            <th>交易记录</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>159915</td>
            <td>创业板ETF</td>
            <td>2.023</td>
            <td>2.000 <span class="positive">(+0.023)</span></td>
            <td>网格=(±1.08%) 数量=4900 每10%=92113</td>
            <td class="positive">32.22%</td>
            <td><span class="buy-signal">买入信号</span></td>
            <td>
              <button class="toggle-btn" @click="showTransactions = !showTransactions">
                {{ showTransactions ? '收起 ▲' : '展开 ▼' }}
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 交易记录表格（默认隐藏） -->
    <div v-show="showTransactions" class="transactions-container">
      <div class="transactions-summary">
        <div class="summary-item">交易总次数: <span>6次</span></div>
        <div class="summary-item">盈利次数: <span>3次 (50%)</span></div>
        <div class="summary-item">平均收益率: <span class="positive">3.29%</span></div>
      </div>

      <table class="transactions-table">
        <thead>
          <tr>
            <th>买入日期</th>
            <th>卖出日期</th>
            <th>买入价</th>
            <th>买入原因</th>
            <th>卖出价</th>
            <th>卖出原因</th>
            <th>收益率</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2024-02-19</td>
            <td>2024-03-22</td>
            <td>1.697</td>
            <td>站上均线</td>
            <td>1.817</td>
            <td>回撤</td>
            <td class="positive">7.07%</td>
          </tr>
          <tr>
            <td>2024-04-29</td>
            <td>2024-05-15</td>
            <td>1.837</td>
            <td>站上均线</td>
            <td>1.797</td>
            <td>止损</td>
            <td class="negative">-2.18%</td>
          </tr>
          <tr>
            <td>2024-05-20</td>
            <td>2024-05-24</td>
            <td>1.831</td>
            <td>站上均线</td>
            <td>1.781</td>
            <td>止损</td>
            <td class="negative">-2.73%</td>
          </tr>
          <tr>
            <td>2024-07-18</td>
            <td>2024-07-23</td>
            <td>1.686</td>
            <td>站上均线</td>
            <td>1.640</td>
            <td>止损</td>
            <td class="negative">-2.73%</td>
          </tr>
          <tr>
            <td>2024-09-12</td>
            <td>2024-09-18</td>
            <td>1.525</td>
            <td>站上均线</td>
            <td>1.504</td>
            <td>跌破20日均线</td>
            <td class="negative">-1.38%</td>
          </tr>
          <tr>
            <td>2024-09-25</td>
            <td>2024-10-09</td>
            <td>1.610</td>
            <td>站上均线</td>
            <td>2.242</td>
            <td>保盈</td>
            <td class="positive">39.25%</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FinancialDashboard',
  data() {
    return {
      showTransactions: false,
      stats: [
        { label: '总收益', value: '398.05%' },
        { label: '300P滚动pe', value: '12.54' },
        { label: '最大预计投入', value: '60万' },
        { label: '应持仓比例', value: '68%' },
        { label: '应持仓金额', value: '41万' },
        { label: '每1%操作金额', value: '6896元' }
      ],
      inflowSectors: [
        '互联网服务', '通信设备', '半导体', '消费电子',
        '软件开发', '电子元件', '文化传媒', '通用设备',
        '电源设备', '计算机设备'
      ],
      outflowSectors: [
        '化学制药', '农牧饲渔', '小金属', '珠宝首饰',
        '中药', '银行', '食品饮料', '电力行业',
        '生物制品', '环保行业'
      ]
    }
  }
}
</script>

<style scoped>
.financial-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', 'Microsoft YaHei', sans-serif;
  background-color: #fff;
}

/* 顶部统计栏 */
.stats-header {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 30px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.stat-item {
  flex: 1;
  min-width: 150px;
  padding: 10px;
  text-align: center;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* 资金流向行业展示 */
.sectors-container {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.sector-section {
  flex: 1;
  padding: 20px;
  border: 1px solid #eaeaea;
  border-radius: 8px;
}

.inflow .section-title {
  color: #f56c6c;
}

.outflow .section-title {
  color: #67c23a;
}

.section-title {
  font-size: 16px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.section-title i {
  margin-right: 8px;
  font-size: 18px;
}

.sectors-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.sector-tag {
  padding: 8px 12px;
  font-size: 13px;
  text-align: center;
  border-radius: 4px;
  background-color: #f5f7fa;
}

.inflow .sector-tag {
  background-color: #feeeee;
  color: #f56c6c;
}

.outflow .sector-tag {
  background-color: #f0f9eb;
  color: #67c23a;
}

/* ETF表格 */
.etf-container {
  margin-bottom: 30px;
}

.etf-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #eaeaea;
}

.etf-table th,
.etf-table td {
  padding: 16px;
  text-align: left;
  border-bottom: 1px solid #eaeaea;
}

.etf-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

.positive {
  color: #f56c6c;
  font-weight: 600;
}

.buy-signal {
  background-color: #f56c6c;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
}

.toggle-btn {
  background: none;
  border: 1px solid #409eff;
  color: #409eff;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.toggle-btn:hover {
  background-color: #409eff;
  color: white;
}

/* 交易记录表格 */
.transactions-container {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
}

.transactions-summary {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
  padding: 15px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.summary-item {
  font-size: 15px;
  color: #606266;
}

.summary-item span {
  font-weight: 600;
  color: #333;
}

.transactions-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #eaeaea;
}

.transactions-table th,
.transactions-table td {
  padding: 14px;
  text-align: left;
  border-bottom: 1px solid #eaeaea;
}

.transactions-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

.negative {
  color: #67c23a;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .sectors-container {
    flex-direction: column;
  }

  .sectors-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .stats-header {
    flex-direction: column;
    gap: 10px;
  }

  .stat-item {
    min-width: 100%;
  }

  .sectors-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .etf-table {
    overflow-x: auto;
    display: block;
  }

  .transactions-summary {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .sectors-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-title {
    font-size: 14px;
  }
}
</style>
